<!--
  -    Copyright (c) 2018-2025, lengleng All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: lengleng (wangiegie@gmail.com)
  -->

<template>
  <div class="app-container calendar-list-container" v-loading="loading">
    <el-form style="width: 650px;" label-width="120px" :rules="rules" :model="form" ref="form">
      <div class="title">基本信息</div>
      <el-form-item label="商品名称:" prop="productName">
        <el-input v-model="form.productName" placeholder="请输入商品名称" class="inputRow"></el-input>
      </el-form-item>
      <el-form-item label="商品描述:" prop="description">
        <el-input v-model="form.description" placeholder="请输入商品描述" class="inputRow"></el-input>
      </el-form-item>
      <el-form-item label="主图:" prop="surfaceImgUrl">
        <el-upload class="avatar-uploader" action="/app/sys/oss/upload" :show-file-list="false"
                   :on-success="handleAvatarSuccess">
          <img v-if="form.surfaceImgUrl" :src="form.surfaceImgUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="产品分组:" prop="module">
        <el-select v-model="form.module" placeholder="请选择" class="select-group" @change="moduleChange">
          <el-option
            v-for="item in productDevice"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <div class="title">商品属性</div>
      <el-form-item label="供应类型:" prop="supplyType">
        <!--<span>{{(form.module === 'IN_STOCK' || form.module === 'BRANDS') ? '实物' : '设计稿'}}</span>-->
        <el-radio-group v-model="form.supplyType">
          <el-radio label="1" v-if="form.module !== 'GROUP_PURCHASING'">实物</el-radio>
          <el-radio label="2" v-if="form.module === 'GROUP_PURCHASING'">设计稿</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="适用人群:" prop="categoryId">
        <el-select v-model="form.categoryId" placeholder="请选择" class="select-group" @change="handleChangePeople">
          <el-option
            v-for="item in suitPeople"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="款式:" prop="typeId" v-if="form.categoryId">
        <el-select v-model="form.typeId" placeholder="请选择" class="select-group">
          <el-option
            v-for="item in kindList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="风格:" prop="featureId">
        <el-select v-model="form.featureId" placeholder="请选择" class="select-group">
          <el-option
            v-for="item in style"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <!--<el-checkbox-group v-model="form.featureId" :min="1">-->
        <!--<el-checkbox v-for="item in style" :label="item.value" :key="item.value">{{item.label}}</el-checkbox>-->
        <!--</el-checkbox-group>-->
      </el-form-item>
      <el-form-item label="特征:" prop="characteristicList">
        <el-checkbox-group v-model="form.characteristicList" :min="1">
          <el-checkbox v-for="item in characteristicList" :label="item.value" :key="item.value">{{item.label}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="材质:" prop="materialList">
        <el-checkbox-group v-model="form.materialList" :min="1">
          <el-checkbox v-for="item in materialList" :label="item.value" :key="item.value">{{item.label}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="尺码:" prop="sizeList">
        <el-checkbox-group v-model="form.sizeList" :min="1">
          <el-checkbox v-for="item in sizeList" :label="item.value" :key="item.value">{{item.label}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="颜色:" prop="colorList">
        <div>
          <ul class="colorList">
            <li v-for="(item, index) in form.colorList" :key="index">
              <div @click="checkColorImgIndex(index)">
                <el-upload class="avatar-uploader" style="margin-right: 30px;" action="/app/sys/oss/upload"
                           :show-file-list="false" :on-success="handleColorListSuccess">
                  <img v-if="item.image" :src="item.image" class="colors">
                  <i v-else class="el-icon-plus color-uploader-icon"></i>
                </el-upload>
              </div>
              <el-input v-model="item.color" placeholder="请输入颜色描述" class="inputRow" style="width: auto;"></el-input>
              <el-button @click="deleteColorImgList(index)" v-if="form.colorList.length > 1" style="margin-left: 30px;"
                         type="danger" icon="el-icon-delete" circle></el-button>
            </li>
          </ul>
          <el-button type="success" @click="addColorImgList">添加<i class="el-icon-plus el-icon--right"></i></el-button>
        </div>
      </el-form-item>
      <el-form-item label="商品包装:" prop="packaging">
        <el-input v-model="form.packaging" placeholder="请输入商品包装" class="inputRow"></el-input>
      </el-form-item>
      <el-form-item label="商品重量:" prop="weight">
        <el-input v-model="form.weight" placeholder="请输入商品重量" class="inputRow"></el-input>
      </el-form-item>
      <el-form-item label="商品功能:" prop="function">
        <el-input v-model="form.function" placeholder="请输入商品功能" class="inputRow"></el-input>
      </el-form-item>
      <el-form-item label="产地:" prop="productPlace">
        <el-input v-model="form.productPlace" placeholder="请输入产地" class="inputRow"></el-input>
        <!--<el-cascader expand-trigger="hover" :options="addressList" :value="form.productPlace" v-model="form.productPlace"></el-cascader>-->
      </el-form-item>
      <el-form-item label="上市时间:" prop="promotionTime">
        <el-date-picker class="select-group" v-model="form.promotionTime" value-format="yyyy-MM-dd" type="date"
                        placeholder="请输入上市时间" :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <div class="title">销售属性</div>
      <el-form-item label="划线价:" prop="linePrice" v-if="good_audit"><!--泳衣库有-->
        <el-input v-model.number="form.linePrice" placeholder="请输入划线价" class="inputRow"></el-input>
      </el-form-item>
      <el-form-item label="供货价:" prop="supplyPrice"><!--商家有-->
        <el-input v-model.number="form.supplyPrice" placeholder="请输入供货价" class="inputRow"></el-input>
      </el-form-item>
      <el-form-item label="市场价:" prop="marketPrice"><!--商家有-->
        <el-input v-model.number="form.marketPrice" placeholder="请输入市场价" class="inputRow"></el-input>
      </el-form-item>
      <el-form-item label="成本价:" prop="costPrice" v-if="good_audit"><!--泳衣库有-->
        <el-input v-model.number="form.costPrice" placeholder="请输入成本价" class="inputRow"></el-input>
      </el-form-item>
      <el-form-item label="销售价:" prop="salePrice" v-if="good_audit"><!--泳衣库有-->
        <el-input v-model.number="form.salePrice" placeholder="请输入销售价" class="inputRow"></el-input>
      </el-form-item>
      <el-form-item label="拼单价:" prop="crowdorderingPrice" v-if="good_audit && form.module === 'GROUP_PURCHASING'"><!--泳衣库有-->
        <el-input v-model.number="form.crowdorderingPrice" placeholder="请输入拼单价" class="inputRow"></el-input>
      </el-form-item>
      <el-form-item label="起拼量:" prop="minimumNumber" v-if="good_audit && form.module === 'GROUP_PURCHASING'"><!--泳衣库有-->
        <el-input v-model.number="form.minimumNumber" placeholder="请输入起拼量" class="inputRow"></el-input>
      </el-form-item>
      <el-form-item label="拼单成功数量:" prop="fullNumber" v-if="good_audit && form.module === 'GROUP_PURCHASING'"><!--泳衣库有-->
        <el-input v-model.number="form.fullNumber" placeholder="请输入拼单成功数量" class="inputRow"></el-input>
      </el-form-item>
      <!--<el-form-item label="" v-if="good_audit && form.module === 'exclusive'">&lt;!&ndash;泳衣库有&ndash;&gt;-->
      <!--<div class="coorPrice-item clearfix">-->
      <!--<span class="coor-title"><i style="color: #ff0f37;margin-right: 5px;">*</i>每人拼单数量：</span>-->
      <!--<input class="coor-input" type="text" v-model="form.regulationJson.minimumNumber">-->
      <!--</div>-->
      <!--<div class="coorPrice-item clearfix">-->
      <!--<span class="coor-title"><i style="margin-right: 6px;">&nbsp;</i>拼单成功数量：</span>-->
      <!--<input class="coor-input" type="text" v-model="form.regulationJson.fullQuota">-->
      <!--</div>-->
      <!--<div class="coorPrice-item clearfix">-->
      <!--<span class="coor-title" style="font-weight: bold"><i style="margin-right: 6px;">&nbsp;</i>拼单优惠</span>-->
      <!--</div>-->
      <!--<div class="coorPrice-item clearfix">-->
      <!--<span class="coor-title"><i style="margin-right: 6px;">&nbsp;</i>单个订单金额：满</span>-->
      <!--<input class="coor-price" style="margin: 0 10px;" type="text" v-model="form.regulationJson.minimumNumber">-->
      <!--<span class="coor-title"><i style="margin-right: 6px;">&nbsp;</i>优惠</span>-->
      <!--<input class="coor-price" style="margin: 0 10px;" type="text" v-model="form.regulationJson.minimumNumber">%-->
      <!--<el-button style="margin-left: 10px;" type="success" @click="handleAddPrice">增加<i class="el-icon-plus el-icon&#45;&#45;right"></i></el-button>-->
      <!--</div>-->
      <!--<div class="coorPrice-item clearfix">-->
      <!--<span class="coor-title"><i style="margin-right: 6px;">&nbsp;</i>单款产品拼单：数量满</span>-->
      <!--<input class="coor-price" style="margin: 0 10px;" type="text" v-model="form.regulationJson.minimumNumber">-->
      <!--<span class="coor-title"><i style="margin-right: 6px;">&nbsp;</i>所有人优惠</span>-->
      <!--<input class="coor-price" style="margin: 0 10px;" type="text" v-model="form.regulationJson.minimumNumber">%-->
      <!--</div>-->
      <!--<div class="coorPrice-item clearfix">-->
      <!--<span class="coor-title"><i style="margin-right: 6px;">&nbsp;</i>单个订单数量：满</span>-->
      <!--<input class="coor-price" style="margin: 0 10px;" type="text" v-model="form.regulationJson.minimumNumber">-->
      <!--<span class="coor-title"><i style="margin-right: 6px;">&nbsp;</i>优惠</span>-->
      <!--<input class="coor-price" style="margin: 0 10px;" type="text" v-model="form.regulationJson.minimumNumber">%-->
      <!--<el-button style="margin-left: 10px;" type="success" @click="handleAddNumber">增加<i class="el-icon-plus el-icon&#45;&#45;right"></i></el-button>-->
      <!--</div>-->
      <!--</el-form-item>-->
      <!--拼单价--><!--泳衣库有-->
      <el-form-item label="总库存:" prop="repertoryNumber">
        <el-input v-model.number="form.repertoryNumber" placeholder="请输入总库存（件）" class="inputRow"></el-input>
      </el-form-item>
      <div class="title">商品详情</div>
      <el-form-item label="产品图:" prop="productImgList">
        <el-upload action="/app/sys/oss/upload" :file-list="form.productImgList" list-type="picture-card"
                   :on-preview="handlePictureCardPreview" :on-success="handleProductImgSuccess"
                   :on-remove="handleProductImgRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="产品详情描述:" prop="detailImgList">
        <el-upload action="/app/sys/oss/upload" :file-list="form.detailImgList" list-type="picture-card"
                   :on-preview="handlePictureCardPreview" :on-success="handleDetailImgSuccess"
                   :on-remove="handleDetailImgRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <!--<el-form-item label="备注:" prop="other">-->
      <!--<el-input v-model="form.description" type="textarea" resize="none" rows="5" placeholder="备注" class="inputRow"></el-input>-->
      <!--</el-form-item>-->
      <el-form-item>
        <el-button type="primary" @click="handleSubmit('form')">提交</el-button>
        <el-button @click="resetForm('form')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="previewVisible">
      <img width="100%" :src="previewImageUrl">
    </el-dialog>
  </div>
</template>

<script>
  import { mapGetters, mapState } from 'vuex'
  import { addressList } from '@/util/address'
  // import { getUserId } from '@/api/user'
  import {
    sellerPublishGoodsPc,
    querySuitPeople,
    querySuitPeopleKind,
    queryStyleList,
    queryDictList,
    queryGoodsDetail
  } from '@/api/goods'
  import { validatenull } from '@/util/validate'

  export default {
    name: 'seller_index',
    data() {
      const validateProduct = (rule, value, callback) => {
        if (value.length <= 0) {
          callback(new Error('请上传产品图'))
        } else {
          callback()
        }
      }
      const validateDetail = (rule, value, callback) => {
        if (value.length <= 0) {
          callback(new Error('请上传产品详情图'))
        } else {
          callback()
        }
      }
      const validateColor = (rule, value, callback) => {
        let count = 0
        value.forEach(item => {
          if (validatenull(item.image) || validatenull(item.color)) {
            count++
          }
        })
        if (count > 0) {
          callback(new Error('请完善颜色图片或描述'))
        } else {
          callback()
        }
      }
      return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now()
          }
        },
        goodsId: '', // 商品id
        userId: '', // userId
        brandStatus: '', // 是否品牌商
        addressList, // 地址列表
        loading: false, // 加载中
        previewVisible: false, // 图片预览显示
        previewImageUrl: '', // 图片预览
        form: {
          productName: '', // 商品名称
          description: '', // 商品描述
          surfaceImgUrl: '', // 主图
          module: '', // 产品分组
          supplyType: '1', // 供应类型
          categoryId: '', // 适用人群
          typeId: '', // 款式
          featureId: [], // 风格
          characteristicList: [], // 特征
          materialList: [], // 材质
          sizeList: [], // 尺码
          packaging: '', // 包装
          function: '', // 功能
          productPlace: '', // 产地
          promotionTime: '', // 上市时间
          linePrice: '', // 划线价
          salePrice: '', // 销售价
          supplyPrice: '', // 供货价
          marketPrice: '', // 市场价
          costPrice: '', // 成本价
          crowdorderingPrice: '', // 拼单价
          minimumNumber: '', // 起拼量
          productImgList: [], // 产品图列表
          detailImgList: [], // 图片列表
          colorList: [
            {
              image: '',
              color: ''
            }
          ], // 颜色列表
          // regulationJson: {
          //   minimumNumber: '', // 每人拼单数量
          //   fullQuota: '', // 拼单成功数量
          //   priceRegulations: [], // 金额规则列表
          //   numberRegulations: [] // 数量规则列表
          // }
        }, // 表单内容
        priceList: [
          {
            number: '',
            price: ''
          }
        ], // 价格列表
        productDevice: [], // 产品分组
        suitPeople: [], // 适用人群
        kindList: [], // 款式
        style: [], // 风格
        characteristicList: [], // 特征
        materialList: [], // 材质
        colorImgIndex: 0, // 下标
        sizeList: [], // 尺码
        rules: {
          productName: [
            {
              required: true,
              message: '请输入商品名称',
              trigger: 'blur'
            }
          ],
          description: [
            {
              required: true,
              message: '请输入商品描述',
              trigger: 'blur'
            }
          ],
          surfaceImgUrl: [
            {
              required: true,
              message: '请上传主图',
              trigger: 'blur'
            }
          ],
          module: [
            {
              required: true,
              message: '请选择产品分组',
              trigger: 'blur'
            }
          ],
          supplyType: [
            {
              required: true,
              message: '请选择供应类型',
              trigger: 'blur'
            }
          ],
          categoryId: [
            {
              required: true,
              message: '请选择适用人群',
              trigger: 'blur'
            }
          ],
          typeId: [
            {
              required: true,
              message: '请选择款式',
              trigger: 'blur'
            }
          ],
          featureId: [
            {
              required: true,
              message: '请选择风格',
              trigger: 'blur'
            }
          ],
          characteristicList: [
            {
              required: true,
              message: '请选择特征',
              trigger: 'blur'
            }
          ],
          packaging: [
            {
              required: true,
              message: '请输入商品包装',
              trigger: 'blur'
            }
          ],
          function: [
            {
              required: true,
              message: '请输入商品功能',
              trigger: 'blur'
            }
          ],
          materialList: [
            {
              required: true,
              message: '请选择材质',
              trigger: 'blur'
            }
          ],
          sizeList: [
            {
              required: true,
              message: '请选择尺码',
              trigger: 'blur'
            }
          ],
          weight: [
            {
              required: true,
              message: '请输入商品重量',
              trigger: 'blur'
            }
          ],
          productPlace: [
            {
              required: true,
              message: '请输入产地',
              trigger: 'blur'
            }
          ],
          repertoryNumber: [
            {
              required: true,
              message: '请输入总库存',
              trigger: 'blur'
            },
            { type: 'number', message: '总库存必须为数字值' }
          ],
          promotionTime: [
            {
              required: true,
              message: '请选择上市时间',
              trigger: 'blur'
            }
          ],
          salePrice: [
            {
              required: true,
              message: '请输入销售价',
              trigger: 'blur'
            },
            { type: 'number', message: '销售价必须为数字值' }
          ],
          linePrice: [
            {
              required: true,
              message: '请输入划线价',
              trigger: 'blur'
            },
            { type: 'number', message: '划线价必须为数字值' }
          ],
          supplyPrice: [
            {
              required: true,
              message: '请输入供货价',
              trigger: 'blur'
            },
            { type: 'number', message: '供货价必须为数字值' }
          ],
          marketPrice: [
            {
              required: true,
              message: '请输入市场价',
              trigger: 'blur'
            },
            { type: 'number', message: '市场价必须为数字值' }
          ],
          costPrice: [
            {
              required: true,
              message: '请输入成本价'
            },
            { type: 'number', message: '成本价必须为数字值' }
          ],
          crowdorderingPrice: [
            {
              required: true,
              message: '请输入拼单价',
              trigger: 'blur'
            },
            { type: 'number', message: '拼单价必须为数字值' }
          ],
          minimumNumber: [
            {
              required: true,
              message: '请输入起拼量',
              trigger: 'blur'
            },
            { type: 'number', message: '起拼量必须为数字值' }
          ],
          fullNumber: [
            {
              required: true,
              message: '请输入拼单成功数量',
              trigger: 'blur'
            },
            { type: 'number', message: '拼单成功数量必须为数字值' }
          ],
          productImgList: [
            {
              required: true,
              validator: validateProduct,
              trigger: 'blur'
            }
          ],
          detailImgList: [
            {
              required: true,
              validator: validateDetail,
              trigger: 'blur'
            }
          ],
          colorList: [
            {
              required: true,
              validator: validateColor,
              trigger: 'blur'
            }
          ]
        }
      }
    },
    computed: {
      ...mapGetters(['permissions']),
      ...mapState({
        userInfo: state => state.user.userInfo
      })
    },
    created() {
      this.goodsId = this.$route.query.id
      if (this.goodsId) {
        const str = this.goodsId + '/2'
        this.loading = true
        queryGoodsDetail(str).then((res) => {
          const details = res.data.data.mallGoodsDetail
          this.form.productName = details.productName
          this.form.description = details.description
          this.form.surfaceImgUrl = details.surfaceImgUrl
          this.form.module = details.module
          this.form.categoryId = parseInt(details.categoryId)
          this.handleChangePeople(this.form.categoryId)
          this.form.typeId = parseInt(details.typeId)
          this.form.featureId = parseInt(details.featureId)
          this.form.characteristicList = details.characteristicList
          const list = []
          details.colorList.forEach(item => {
            const obj = {
              image: item.image,
              color: item.color
            }
            list.push(obj)
          })
          this.form.colorList = list
          this.form.materialList = details.materialList
          this.form.sizeList = details.sizeList
          this.form.packaging = details.packaging
          this.form.weight = Number(details.weight)
          this.form.function = details.function
          this.form.productPlace = details.productPlace
          this.form.promotionTime = details.promotionTime
          this.form.supplyPrice = details.supplyPrice
          this.form.marketPrice = details.marketPrice
          this.form.crowdorderingPrice = details.crowdorderingPrice
          this.form.repertoryNumber = details.repertoryNumber
          details.imgList.forEach(item => {
            const obj = {
              type: item.type,
              url: item.url
            }
            if (item.type === 'carousel') {
              this.form.productImgList.push(obj)
            } else if (item.type === 'particulars') {
              this.form.detailImgList.push(obj)
            }
          })
          this.loading = false
        })
      }
      this.good_audit = this.permissions['good_audit']
      // const datas = {
      //   phone: this.userInfo.phone
      // }
      this.userId = this.userInfo.userId
      this.brandStatus = this.userInfo.brandStatus
      // getUserId(datas).then(response => {
      //   this.userId = response.data.data.id
      // })
      this.getModuleList() // 获取模块列表
      this.getSuitPeople() // 获取适用人群
      this.getStyleList() // 获取风格列表
      this.getFeatureList() // 获取特征列表
      this.getMaterialList() // 获取材质列表
      this.getSizeList() // 获取尺码列表
    },
    methods: {
      moduleChange(val) { // 模块切换
        const that = this
        if (val === 'GROUP_PURCHASING') {
          that.form.supplyType = '2'
        } else {
          that.form.supplyType = '1'
        }
      },
      getModuleList() {
        this.loading = true
        this.productDevice = [
          {
            value: 'IN_STOCK',
            label: '现货'
          }
        ]
        if (this.brandStatus) {
          const obj = {
            value: 'BRANDS',
            label: '品牌'
          }
          // const obj2 = {
          //   value: 'DESIGNERS',
          //   label: '设计稿'
          // }
          this.productDevice.push(obj)
          // this.productDevice.push(obj2)
        }
        if (this.good_audit) {
          const obj = {
            value: 'GROUP_PURCHASING',
            label: '拼单'
          }
          this.productDevice.push(obj)
        }
        // queryDictList('mall_goods_module').then(res => {
        //   const list = res.data.data
        //   const typeList = []
        //   list.forEach(item => {
        //     const obj = {
        //       value: item.value,
        //       label: item.description
        //     }
        //     if (item.value !== 'CUSTOMIZED') {
        //       typeList.push(obj)
        //     }
        //   })
        //   if (!this.good_audit) {
        //     if (this.brandStatus) {
        //       this.productDevice.push(typeList[0])
        //       this.productDevice.push(typeList[2])
        //     }
        //   } else {
        //     this.productDevice = typeList
        //   }
        //   this.loading = false
        // })
      }, // 获取模块列表
      getSuitPeople() { // 获取适用人群
        this.loading = true
        querySuitPeople().then(res => {
          const list = res.data.data
          list.forEach(item => {
            const obj = {
              value: item.id,
              label: item.remark
            }
            this.suitPeople.push(obj)
          })
          this.loading = false
        })
      },
      handleChangePeople(val) { // 适用人群change
        this.loading = true
        this.kindList = []
        this.form.typeId = ''
        querySuitPeopleKind(val).then(res => {
          const list = res.data.data
          list.forEach(item => {
            const obj = {
              value: item.id,
              label: item.remark
            }
            this.kindList.push(obj)
          })
          this.loading = false
        })
      },
      getStyleList() { // 获取风格列表
        this.loading = true
        queryStyleList().then(res => {
          const list = res.data.data
          list.forEach(item => {
            const obj = {
              value: item.id,
              label: item.remark
            }
            this.style.push(obj)
          })
          this.loading = false
        })
      },
      getFeatureList() { // 获取特征列表
        this.loading = true
        queryDictList('mall_goods_characteristic').then(res => {
          const list = res.data.data
          list.forEach(item => {
            const obj = {
              value: item.value,
              label: item.description
            }
            this.characteristicList.push(obj)
          })
          this.loading = false
        })
      },
      getMaterialList() { // 获取材质列表
        this.loading = true
        queryDictList('mall_goods_material').then(res => {
          const list = res.data.data
          list.forEach(item => {
            const obj = {
              value: item.value,
              label: item.description
            }
            this.materialList.push(obj)
          })
          this.loading = false
        })
      },
      getSizeList() { // 获取尺码列表
        this.loading = true
        queryDictList('mall_goods_size').then(res => {
          const list = res.data.data
          list.forEach(item => {
            const obj = {
              value: item.value,
              label: item.description
            }
            this.sizeList.push(obj)
          })
          this.loading = false
        })
      },
      handleAvatarSuccess(res) {
        this.form.surfaceImgUrl = res.data
      }, // 头像上传
      handleColorListSuccess(res) {
        this.form.colorList[this.colorImgIndex].image = res.data
      }, // 颜色图片上传
      checkColorImgIndex(inx) { // 获取下标
        this.colorImgIndex = inx
      },
      addColorImgList() { // 添加一条颜色
        const that = this
        let count = 0
        that.form.colorList.forEach(item => {
          if (validatenull(item.image) || validatenull(item.color)) {
            count++
          }
        })
        if (count > 0) {
          that.$message.error('请完善颜色图片或描述')
          return
        }
        const obj = {
          image: '',
          color: ''
        }
        that.form.colorList.push(obj)
      },
      deleteColorImgList(inx) { // 删除颜色
        this.form.colorList.splice(inx)
      },
      handlePictureCardPreview(file) { // 预览图片
        this.previewImageUrl = file.url
        this.previewVisible = true
      },
      handleProductImgSuccess(response, file, fileList) {
        const obj = {
          url: response.data,
          type: 'carousel'
        }
        this.form.productImgList.push(obj)
      }, // 产品图上传成功
      handleDetailImgSuccess(response, file, fileList) {
        const obj = {
          url: response.data,
          type: 'particulars'
        }
        this.form.detailImgList.push(obj)
      }, // 详情图上传成功
      handleProductImgRemove(file, fileList) {
        this.form.productImgList = fileList
        // fileList.forEach(item => {
        //   const obj = {
        //     url: item.response.data,
        //     type: 'carousel'
        //   }
        //   that.form.productImgList.push(obj)
        // })
      }, // 删除图片
      handleDetailImgRemove(file, fileList) {
        this.form.detailImgList = fileList
        // const that = this
        // that.form.detailImgList = []
        // fileList.forEach(item => {
        //   const obj = {
        //     url: item.response.data,
        //     type: 'particulars'
        //   }
        //   that.form.detailImgList.push(obj)
        // })
      }, // 删除图片
      // handleAddPrice() { // 添加价格
      //   if (this.priceList.length >= 4) {
      //     return
      //   }
      //   const obj = {
      //     number: '',
      //     price: ''
      //   }
      //   this.priceList.push(obj)
      // },
      deletePrice(inx) { // 删除价格
        if (this.priceList.length <= 1) {
          return
        }
        this.priceList.splice(inx, 1)
      },
      handleSubmit() { // 提交发布
        const that = this
        that.$refs['form'].validate((valid) => {
          if (valid) {
            const params = that.form
            // params.supplyType = (that.form.module === 'IN_STOCK' || that.form.module === 'BRANDS') ? '1' : '2'
            if (that.good_audit) {
              params.publisherId = that.userId
            } else {
              params.supplierId = that.userId
            }
            let imgList = []
            imgList = imgList.concat(this.form.productImgList, this.form.detailImgList)
            params.imgList = imgList
            delete params.productImgList
            delete params.detailImgList
            sellerPublishGoodsPc(that.good_audit, params).then((res) => {
              console.log(res)
              if (res.data.code === '0') {
                that.$message({
                  message: '发布成功',
                  type: 'success'
                })
                setTimeout(() => {
                  that.$router.push('/goods/manage')
                }, 500)
              } else {
                that.$message({
                  message: res.data.msg,
                  type: 'error'
                })
              }
            })
          } else {
            return false
          }
        })
      }
    }
  }
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
</style>
<style scoped>
  .title {
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 15px;
  }

  .select-group {
    width: 200px !important;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    display: block;
    width: 178px;
    height: 178px;
  }

  .el-loading-spinner .el-loading-text {
    text-align: center;
  }

  .coor-title {
    float: left;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
  }

  .coor-input {
    float: left;
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    font-size: 14px;
    width: 200px;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
  }

  .coorPrice-item {
    margin-bottom: 22px;
  }

  .coor-price {
    float: left;
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    font-size: 14px;
    width: 100px;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
  }

  .colors {
    display: block;
    width: 100px;
    height: 100px;
  }

  .color-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }

  .colorList li {
    display: flex;
    align-items: center;
  }

  .addColor {
    width: 50px;
    height: 50px;
    margin-left: 30px;
    border: 1px solid #8c939d;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
  }
</style>
